import React, { useMemo } from 'react'
import './index.css'
import {TodoListType} from '../Main'
type PropsType = {
  todolist:TodoListType[]
  handleClearComplete:()=>void
  handleSelectClick:(value:string)=>void
  select:string
}
export default function Footer(props:PropsType) {
  const todoList = props.todolist
  const itemsLeft = useMemo(() => todoList && todoList.length, [todoList])
  const handleClick = (value:string) => {
    props.handleSelectClick(value)
  }
 return (
    <div className='footer'>
      <div className="items">
        {itemsLeft} <span>items left</span>
      </div>
      {/* active 添加active表示选中 */}
      <div className='select'>
        <div onClick={() => handleClick('all')} className={props.select === 'all'? 'active' : ''}>All</div>
        <div onClick={() => handleClick('active')} className={props.select === 'active'? 'active' : ''}>Active</div>
        <div onClick={() => handleClick('complete')} className={props.select === 'complete'? 'active' : ''}>Completed</div>
      </div>
      <div className="clear">
        <div onClick={props.handleClearComplete}>Clear Completed</div>
      </div>
    </div>
  )
}
